<template>
    <div class="edit-main">
        <van-nav-bar left-arrow @click-left="onClickLeft">
            <template #left>
                <van-icon :name="backicon" size="20"/>
            </template>
            <template #title>
                <span class="hometitle">编辑地址</span>
            </template>
        </van-nav-bar>

        <div class="edit-form">
            <div class="edit-form-item">
                <p id="uname">收货人</p>
                <input type="text" 
                id="Iuname"
                v-model="UserInfo.user_name" 
                @focus="setPelementStyle('uname','Iuname')" 
                @blur="outPelementStyle('uname','Iuname')" 
                placeholder="收货人姓名">
            </div>
            <div class="edit-form-item">
                <p id="phonenum">手机号</p>
                <input type="text" 
                id="Iphonenum"
                placeholder="收货人联系方式" 
                @focus="setPelementStyle('phonenum','Iphonenum')" 
                @blur="outPelementStyle('phonenum','Iphonenum')" 
                v-model="UserInfo.phone">
            </div>
            <div class="edit-form-item" @click="showArea=true">
                <p @click="showArea=true">所在地区</p>
                <input @click="showArea=true" type="text" readonly v-model="UserInfo.city" placeholder="请点击选择省市区">
                <img @click="showArea=true" src="../../assets/img/editaddress-arrow-left.png" alt="">
            </div>
            <div class="edit-form-item">
                <p id="detaddress">详细地址</p>
                <input type="text" 
                id="Idetaddress"
                placeholder="请填写详细信息" 
                @focus="setPelementStyle('detaddress','Idetaddress')" 
                @blur="outPelementStyle('detaddress','Idetaddress')" 
                v-model="UserInfo.address">
            </div>
            <div class="set-defult">
                <span>设为默认地址</span>
                <van-icon name="checked" size="18px" :color="isTop==0?'#ccc':'#f26e6e'" @click="changeIsTop"/>
            </div>
        </div>
        <van-popup v-model="showArea" position="bottom">
            <van-area
                :area-list="AreaList"
                @confirm="onConfirm"
                @cancel="showArea = false"
            />
        </van-popup>
        <img class="submit-btn" src="../../assets/img/save.png" @click="save" alt="保存">
    </div>
</template>
<script>
import AreaList from '../../service/area';
import {_ajaxaddress,_getAddressInfo} from '../../service/address'
export default {
    data(){
        return{
            backicon:require('../../assets/img/backicon.png'),
            showArea: false,
            AreaList,
            isTop:0,
            UserInfo:{
                user_name:"",
                phone:"",
                city:"",
                address:"",
            },
        }
    },
    computed:{
        // userphone(){
        //     return this.UserInfo.phone
        // }
    },
    watch:{
        // userphone(){
        //     if()
        // }
    },
    mounted(){
        let id = this.$route.query.id;
        if(id){
            this.getAddressInfo(id)
        }
    },
    methods:{
        setPelementStyle(dom,dom1){
            document.getElementById(dom).style.color='#999'
            document.getElementById(dom).style.fontSize="13px"
            document.getElementById(dom1).style.fontSize="13px"
            document.getElementById(dom1).style.fontWeight="bold"
        },
        outPelementStyle(dom,dom1){
            document.getElementById(dom).style.color="#333"
            document.getElementById(dom).style.fontSize="13px"
            document.getElementById(dom1).style.fontSize="13px"
            document.getElementById(dom1).style.fontWeight="normal"
        },
        getAddressInfo(id){
            let _this=this
            let uid=JSON.parse(localStorage.getItem('user')).user_id
            _getAddressInfo({user_id:uid,address_id:id}).then(res=>{
                setTimeout(()=>{
                    _this.UserInfo.user_name=res.data.user_name
                    _this.UserInfo.phone=res.data.phone
                    _this.UserInfo.address=res.data.address
                    _this.UserInfo.city=`${res.data.sheng} ${res.data.shi} ${res.data.qu}`
                    _this.UserInfo.address_id=res.data.address_id
                    _this.isTop=res.data.is_top
                },10)
            })

        },
        validatephone(val){
			let nub=val.replace(/\s*/g,"").replace("+86","")
			if(!(/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(nub))){ 
				return false; 
			} 
			return true
		},
        validate(){
            if(!this.validatephone(this.UserInfo.phone)){
                this.$toast.fail('请输入正确的手机号');
                return false
            }
            return true
        },
        onClickLeft(){
            this.$router.push("/manageaddress")
        },
        changeIsTop(){
            if(this.isTop==0){
                this.isTop=1
            }else{
                this.isTop=0
            }
        },
        onConfirm(values) {
            this.UserInfo.sheng=values[0].name
            this.UserInfo.shi=values[1].name
            this.UserInfo.qu=values[2].name
            this.UserInfo.city = values.map((item) => item.name).join(' ');
            this.showArea = false;
        },
        save(){
            let _this=this
            if(!this.validate()){
                return
            }
            _this.$toast.loading({
                duration: 0, // 持续展示 toast
                forbidClick: true,
            })
            _this.UserInfo.user_id=JSON.parse(localStorage.getItem("user")).user_id
            _this.UserInfo.is_top =this.isTop
            console.log(this.UserInfo)
            _ajaxaddress(this.UserInfo).then(res=>{
                console.log(res)
                setTimeout(()=>{
                    _this.$toast.clear()
                    _this.$toast(res.message)
                    if(res.errcode=="1"){
                        this.$router.push("/manageaddress")
                    }
                },1000)
            })
        }
    }
}
</script>
<style scoped lang="less">
    .font-SC(){
        font-family: "PingFang SC","Microsoft YaHei";
    }
    .placeholderClass(){
        .font-SC();
        font-size: 13px;
        color: #ccc;

    }
    .edit-main{
		width: 100%;
        height: 100vh;
        overflow-y: auto;
        background-color: #f8f8f8;
        .van-nav-bar{
            .van-nav-bar__left{
                .van-icon__image{
                    width: 8px;
                }
            }
        }
        .hometitle{
            font-size: 18px;
            font-family: "PingFang SC","Microsoft YaHei";
            font-weight: bold;
            color: #000;
            line-height: 46px;
        }
        .edit-form{
            width: 100%;
            height: 345px;
            background-color: #fff;
            margin-top: 13px;
            padding: 0 17px;
            box-shadow: 1px 1px 2px rgba(204, 204, 204, .8);
            .edit-form-item{
                width: 100%;
                height: 73px;
                border-bottom: 1px solid #efefef;
                padding-top: 14px;
                p{
                    font-family: "PingFang SC","Microsoft YaHei";
                    font-weight: bold;
                    font-size: 13px;
                    margin-bottom: 0;
                    line-height: 26px;
                }
                input{
                    width: 100%;
                    background:none;  
                    outline:none;  
                    border:none;
                    font-family: "PingFang SC","Microsoft YaHei";
                    font-size: 13px;
                    line-height: 30px;
                    color: #333;
                    caret-color:#333;
                    font-weight: 300;
                     &::-webkit-input-placeholder{
                        .placeholderClass();
                    }
                    &::-moz-placeholder{
                        .placeholderClass();
                    }
                    &::-ms-input-placeholder{
                        .placeholderClass();
                    }
                }
                img{
                    width: 8px;
                    float: right;
                    margin-left: -12px;
                }
            }
            .set-defult{
                line-height: 50px;
                span{
                    font-family: "PingFang SC","Microsoft YaHei";
                    font-size: 13px;
                    color: #333;
                }
                .van-icon{
                    margin-left: 13px;
                    vertical-align: middle;
                }
            }
        }
        .submit-btn{
            width: 340px;
            margin-top: 274px;
            margin-left: 17px;
            margin-right: 17px;
        }
        @media (max-height: 670px) {
            .submit-btn{
                width: 340px;
                margin-top: 100px;
                margin-left: 17px;
                margin-right: 17px;
            }
        }

    }

    .color333{
        color: #333;
    }
    .color666{
        color: #666;
    }
    
</style>